<template>
    <van-icon :loading="loading" @click="onClick" :name="isCollected ? 'star' : 'star-o'"
        :color="isCollected ? '#ffa500' : ''" />
</template>

<script>
import { delCollectAPI, addCollectAPI } from '@/api/article'
import { ref } from 'vue'
import { Toast } from 'vant'
export default {
  name: 'collectArtcle',
  props: {
    isCollected: {
      type: Boolean,
      required: true
    },
    aticleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  setup (props, content) {
    const loading = ref(false)
    const onClick = async () => {
      loading.value = true
      try {
        if (props.isCollected) {
          // 已收藏 取消
          await delCollectAPI(props.aticleId)
          // 更新视图
          content.emit('up_is_collected', false)
        } else {
          // 未收藏 添加
          await addCollectAPI(props.aticleId)
          // 更新视图
          content.emit('up_is_collected', true)
        }
        Toast.success(props.isCollected ? '已取消收藏' : '已添加收藏')
      } catch (err) {
        console.log(err)
      }
      loading.value = false
    }
    return {
      onClick,
      loading
    }
  }
}
</script>

<style scoped lang="less">

</style>
